<template>
    <div class="wrap">
        <div class="head-boxs">
            <div class="box-item">
                <div class="title-box" style="background-color: rgba(255,121,253,0.7);">
                    <span>
                        <i style="font-size: 24px" class="el-icon-location-outline"></i>
                    </span>
                </div>
                <div class="right-content">
                    <span style="font-size: 18px">
                        {{bestArea}}
                    </span>
                    最佳区域
                </div>
            </div>
            <div class="box-item">
                <div class="title-box" style=" background-color: rgba(160,234,231,0.7);">
                    <span>
                        <i style="font-size: 24px" class="el-icon-s-order"></i>
                    </span>
                </div>
                <div class="right-content">
                    <span style="font-size: 18px">
                        {{currentMonthOrderCount}}
                    </span>
                    本月订单
                </div>
            </div>
            <div class="box-item">
                <div class="title-box" style=" background-color: rgba(243,221,145,0.7);">
                    <span>
                        <i style="font-size: 24px" class="el-icon-medal-1"></i>
                    </span>
                </div>
                <div class="right-content">
                    <span style="font-size: 18px">
                        {{bestMonth}}单
                    </span>
                    最佳绩效
                </div>
            </div>
            <div class="box-item">
                <div class="title-box" style=" background-color:rgba(147,184,239,0.7) ;">
                    <span>
                        <i style="font-size: 24px" class="el-icon-data-line"></i>
                    </span>
                </div>
                <div class="right-content">
                    <span style="font-size: 18px">
                        {{comparePrevious}}
                    </span>
                    同比上月
                </div>
            </div>
        </div>
        <div class="data-main">
            <div class="ve-Data-items">
                <div class="ve-item">
                    <ve-line height="250px" width="650px" :data="monthOrderCount" :settings="monthLineChartSettings"
                             :legend-visible="false" :extend="monthChartExtend"></ve-line>
                    <span class="formImgTitle">月度订单变化趋势</span>
                </div>
                <div class="ve-item">
                    <ve-ring height="250px" width="500px" :data="areaRateRing" :settings="RingChartSettings"
                             :extend="RingChartExtend"></ve-ring>
                    <span class="formImgTitle">当年区域使用占比情况</span>
                </div>
            </div>
            <div class="ve-Data-bottom-year">
                <div class="ve-item">
                    <ve-line height="240px" width="1000px" :data="yearOrderCount" :settings="yearLineChartSettings"
                             :legend-visible="false" :extend="yearChartExtend"></ve-line>
                    <span class="formImgTitle">年度订单变化趋势</span>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
    import {getCurrentAreaRate, getYearOrderData, getMonthCurrent} from '@/utils/apis/order'
    import orderCharts from "@/dataView/order/orderCharts";

    export default {
        name: "OrderData",
        data() {
            return {
                areaRateRing: {},
                yearOrderCount: {},
                monthOrderCount: {},
                //顶部小item
                bestArea: '',
                currentMonthOrderCount: 0,
                bestMonth: 0,
                comparePrevious: 0,
                ...orderCharts,
            }
        },
        created() {
            this.initData()
        },
        methods: {
            async initData() {
                //环图
                await getCurrentAreaRate().then(res => {
                    this.areaRateRing = {
                        columns: ['area', 'areaRate'],
                        rows: res.data.data
                    }
                    let best = 0
                    res.data.data.forEach(area => {
                        if (area.areaRate > best) {
                            best = area.areaRate
                            this.bestArea = area.area
                        }
                    })
                });
                //年份曲线图
                getYearOrderData().then(res => {
                    let list = res.data.data
                    list = list.reverse()
                    this.yearOrderCount = {
                        columns: ['date', 'count'],
                        rows: list
                    }
                });
                //月份曲线图
                getMonthCurrent().then(res => {
                    JSON.stringify(res.data)
                    let list = res.data.data
                    list = list.reverse()
                    this.monthOrderCount = {
                        columns: ['date', 'count'],
                        rows: list
                    }
                    let best = 0
                    this.currentMonthOrderCount = res.data.data[5].count
                    if (res.data.data[4].count === 0) {
                        this.comparePrevious = '暂无数据'
                    } else {
                        this.comparePrevious = (res.data.data[5].count / res.data.data[4].count).toFixed(1) + '%'
                    }
                    res.data.data.forEach(month => {
                        if (month.count > best) {
                            best = month.count
                        }
                        this.bestMonth = best
                    })
                })
            }
        }
    }
</script>

<style scoped>
    .wrap {
        height: 80vh;
        width: 80vw;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
    }

    .head-boxs {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .box-item {
        box-shadow: rgba(255, 255, 255, 0.6) 1px 1px 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 200px;
        height: 70px;
        font-size: 12px;
    }

    .box-item:hover {
        box-shadow: 1px 1px 6px rgba(30, 30, 30, 0.3);
        border-radius: 10px 10px 10px 10px;
    }

    .title-box {
        width: 35%;
        height: 100%;
        color: #f6f6f6;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px 0 0 10px;
    }

    .right-content {
        background-color: rgba(221, 231, 246, 0.32);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 65%;
        height: 100%;
        color: #363a4c;
        border-radius: 0 10px 10px 0px;
    }

    .data-main {
        width: 100%;
        height: 80%;
    }

    .ve-Data-items {
        width: 90%;
        margin-left: 5%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .ve-Data-bottom-year {
        transform: translateY(4%);
        width: 90%;
        margin-left: 5%;
    }

    .ve-item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-radius: 10px;
        box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3);
    }

    .formImgTitle {
        font-size: 20px;
        font-weight: 500;

    }

</style>